<template>
  <div class="page-banner" :style="bg_url">
    <div class="pb-intro">
      <div class="pb-other">
        <h2>{{text}}</h2>
        <h3 v-if="subtitle" v-text="subtitle"></h3>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PageBanner",
  props: {
    text: {
      type: [String, Number]
    },
    bg_url: {
      type: [Object, String]
    },
    subtitle: {
      type: [String, Number]
    }
  }
};
</script>

<style scoped lang="scss">
.page-banner {
  height: 420px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  .pb-intro {
    .pb-other {
      text-align: center;
      color: #fff;
      h2 {
        font: 300 110px/1 "Futura";
        letter-spacing: 0.05em;
      }
      h3 {
        font: 300 60px/1.875 "Futura";
        color: #fff;
        letter-spacing: 0.4em;
      }
    }
  }
}
</style>
